<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/xhtml;charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<title>StarMenu: StarMenu - QML contextual menu plugin - Version 1.0</title>
<link href="tabs.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="dynsections.js"></script>
<link href="search/search.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="search/search.js"></script>
<script type="text/javascript">
  $(document).ready(function() { searchBox.OnSelectItem(0); });
</script>
<link href="doxygen.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="top"><!-- do not remove this div, it is closed by doxygen! -->
<div id="titlearea">
<table cellspacing="0" cellpadding="0">
 <tbody>
 <tr style="height: 56px;">
  <td style="padding-left: 0.5em;">
   <div id="projectname">StarMenu
   &#160;<span id="projectnumber">1.0</span>
   </div>
   <div id="projectbrief">QML contextual menu pluging</div>
  </td>
 </tr>
 </tbody>
</table>
</div>
<!-- end header part -->
<!-- Generated by Doxygen 1.8.1 -->
<script type="text/javascript">
var searchBox = new SearchBox("searchBox", "search",false,'Search');
</script>
  <div id="navrow1" class="tabs">
    <ul class="tablist">
      <li class="current"><a href="index.html"><span>Main&#160;Page</span></a></li>
      <li>
        <div id="MSearchBox" class="MSearchBoxInactive">
        <span class="left">
          <img id="MSearchSelect" src="search/mag_sel.png"
               onmouseover="return searchBox.OnSearchSelectShow()"
               onmouseout="return searchBox.OnSearchSelectHide()"
               alt=""/>
          <input type="text" id="MSearchField" value="Search" accesskey="S"
               onfocus="searchBox.OnSearchFieldFocus(true)" 
               onblur="searchBox.OnSearchFieldFocus(false)" 
               onkeyup="searchBox.OnSearchFieldChange(event)"/>
          </span><span class="right">
            <a id="MSearchClose" href="javascript:searchBox.CloseResultsWindow()"><img id="MSearchCloseImg" border="0" src="search/close.png" alt=""/></a>
          </span>
        </div>
      </li>
    </ul>
  </div>
</div><!-- top -->
<!-- window showing the filter options -->
<div id="MSearchSelectWindow"
     onmouseover="return searchBox.OnSearchSelectShow()"
     onmouseout="return searchBox.OnSearchSelectHide()"
     onkeydown="return searchBox.OnSearchSelectKey(event)">
<a class="SelectItem" href="javascript:void(0)" onclick="searchBox.OnSelectItem(0)"><span class="SelectionMark">&#160;</span>All</a><a class="SelectItem" href="javascript:void(0)" onclick="searchBox.OnSelectItem(1)"><span class="SelectionMark">&#160;</span>Pages</a></div>

<!-- iframe showing the search results (closed by default) -->
<div id="MSearchResultsWindow">
<iframe src="javascript:void(0)" frameborder="0" 
        name="MSearchResults" id="MSearchResults">
</iframe>
</div>

<div class="header">
  <div class="headertitle">
<div class="title">StarMenu - QML contextual menu plugin - Version 1.0 </div>  </div>
</div><!--header-->
<div class="contents">
<div class="textblock"><p>StarMenu - QML contextual menu plugin</p>
<pre class="fragment">\author Marco Bavagnoli &lt;lil.deimos@gmail.com&gt;
</pre><h1><a class="anchor" id="intro_sec"></a>
Introduction</h1>
<p><a class="el" href="index.html#component_starmenu">StarMenu component</a> is a contextual pop up menu that can be raised by clicking or tapping on an area defined like using <code>MouseArea</code> component. StarItems are entries for the StarMenu like MenuItems are for Menu component. This plugin is been developed with Qt 4.7.4 and tested on linux, Nokia N900, Nokia C7-00, Nokia N950 and Android Galaxy tab GT-7310 (with <a href="https://sourceforge.net/p/necessitas/home/necessitas/">Necessitas</a>).<br/>
 <b>Note for Harmattan:</b> .pro file must contains this:<br/>
</p>
<p>contains(MEEGO_EDITION,harmattan) {<br/>
 DEFINES += MEEGO_EDITION_HARMATTAN <br/>
 QT += dbus <br/>
 }<br/>
</p>
<h1><a class="anchor" id="Usage"></a>
Usage</h1>
<p><b>To compile and install the plugin, just do:</b> <br/>
 qmake <br/>
 make <br/>
 make install <br/>
 <br/>
 then in your .qml you will need to <br/>
 import com.starMenu 1.0 <br/>
</p>
<p><b>To compile within your project:</b><br/>
 copy staritem.* and starmenu.* in your project directory and add them to the .pro file.<br/>
 Then in the <em>main.cpp</em> include the headers:<br/>
 </p>
<div class="fragment"><div class="line"><span class="preprocessor">    #include &quot;starmenu.h&quot;</span></div>
<div class="line"><span class="preprocessor">    #include &quot;staritem.h&quot;</span></div>
</div><!-- fragment --><p> <br/>
 and before <em>setSource()</em> or <em>setMainQmlFile()</em> register the component with:<br/>
 </p>
<div class="fragment"><div class="line">    qmlRegisterType&lt;StarMenu&gt;(<span class="stringliteral">&quot;StarMenu&quot;</span>, 1, 0, <span class="stringliteral">&quot;StarMenu&quot;</span>);</div>
<div class="line">    qmlRegisterType&lt;StarItem&gt;(<span class="stringliteral">&quot;StarMenu&quot;</span>, 1, 0, <span class="stringliteral">&quot;StarItem&quot;</span>);</div>
</div><!-- fragment --><p> then, in your .qml file, you will be able to:<br/>
 </p>
<div class="fragment"><div class="line">    <span class="keyword">import</span> StarMenu 1.0</div>
</div><!-- fragment --><div class="image">
<img src="images/StarMenu_two_starsubmenu.jpg" alt="StarMenu_two_starsubmenu.jpg"/>
</div>
<p>The <a class="el" href="index.html#component_starmenu">StarMenu component</a> displays a contextual menu in a declarative user interface.</p>
<p>A StarMenu is hidden by default and opens in response to a user action. The purpose of StarMenu is to manage all StarItem childs. By default they are arrange in a circle shape and, in the center of it, it is painted a star polygon shape with as many spikes as the number of StarItems. It can be visible or not by setting the boolean <code>starCenterVisible</code> property. <br/>
 The circle shape amplitude is given by <code>radiusH</code> and <code>radiusV</code> properties. <br/>
 Clicking on the center of the current menu, will close it and goes back to parent. <br/>
 It's possible to click on the center of the first menu to close all. <br/>
 <code>visualParent</code> property is used to bind the close menu action to a specified item, so, instead of clicking on center of StarMenu, it's possible to set <code>visualParent</code> to the main window and close menu everywhere on the screen. <br/>
 When using <code>visualParent</code>, it come handy the <code>color</code> property to set a transparent color to the clickable area to close the menu. <br/>
 Changing StarItem <code>visible</code> property, makes all StarItems position recalculated with only visible items. <br/>
</p>
<div class="fragment"><div class="line">    StarMenu {</div>
<div class="line">      <span class="keywordtype">id</span>: starMenu</div>
<div class="line">      anchors.fill: parent</div>
<div class="line">      visualParen: mainWindow</div>
<div class="line">      color: Qt.rgba(0, 0, 0, 0.7)</div>
<div class="line">      radiusH: 130</div>
<div class="line">      radiusV: 130</div>
<div class="line"></div>
<div class="line">      StarItem {</div>
<div class="line">         width: 64; height: 64</div>
<div class="line">         Image {</div>
<div class="line">           anchors.fill: parent</div>
<div class="line">           [...]</div>
<div class="line">         }</div>
<div class="line">      }</div>
<div class="line">       StarItem {</div>
<div class="line">       [...]</div>
<div class="line">         StarMenu {</div>
<div class="line">           [...]</div>
<div class="line">         }</div>
<div class="line">       }</div>
<div class="line">    }</div>
</div><!-- fragment --><p> <br/>
<br/>
</p>
<div class="image">
<img src="images/StarMenu_rotation_scale_delayed_animation.jpg" alt="StarMenu_rotation_scale_delayed_animation.jpg"/>
</div>
<p> <br/>
 It is possible to bind animations to StarItems. When a StarMenu is raised, all StarItems have the center by the mouse (or tap) position and their <code>opacity</code>, <code>rotation</code>, <code>x</code>, <code>y</code> property are set to 0. <br/>
 By doing this: <br/>
 </p>
<div class="fragment"><div class="line">    StarItem {</div>
<div class="line">            [...]</div>
<div class="line">            Behavior on x { NumberAnimation { duration: 1500; easing.type: Easing.OutBounce } }</div>
<div class="line">            Behavior on y { NumberAnimation { duration: 1500; easing.type: Easing.OutBounce } }</div>
<div class="line">            Behavior on opacity { NumberAnimation { duration: 2200 } }</div>
<div class="line">            [...]</div>
</div><!-- fragment --><p> <br/>
 StarItems are animated from center to their final position. <br/>
 It is also possible to animate <a class="el" href="index.html#component_starmenu">StarMenu component</a> rotation:</p>
<div class="fragment"><div class="line">    StarMenu {</div>
<div class="line">          <span class="keywordtype">id</span>: starMenu2</div>
<div class="line">          anchors.fill: parent; smooth: <span class="keyword">true</span></div>
<div class="line">          radiusH: 80</div>
<div class="line">          radiusV: 80</div>
<div class="line">          starCenterVisible: <span class="keyword">false</span></div>
<div class="line">          rotation: 1000</div>
<div class="line">          onStarMenuOpening: rotation = 0</div>
<div class="line">          onStarMenuClosing: rotation = 1000</div>
<div class="line">          Behavior on rotation { NumberAnimation { duration: 3000; easing.type: Easing.OutQuad } }</div>
<div class="line">          […]</div>
</div><!-- fragment --><p> StarMenu has a <code>delayChangePos</code> property. For example, when it is set to 100, the animation of the second StarItem is started after 100 ms, the third StarItem after 200 ms and so on. StarItem has also a <code>delayChangePos</code> property and if it is set, it takes priority over the StarMenu <code>delayChangePos</code> property. <br/>
 </p>
<div class="image">
<img src="images/StarMenu_components_inside.jpg" alt="StarMenu_components_inside.jpg"/>
</div>
<p> <br/>
 On right example above, a <code>visualParent</code> property is set to the root view; the user can close the menu by clicking on the visualParent item (in this case the main window).<br/>
 StarItems can also contain any other component then Images, and components could be created dynamically by for example a rss feed: </p>
<div class="fragment"><div class="line">    StarItem {</div>
<div class="line">       width: 320; height: 240</div>
<div class="line">       scale: 0.3</div>
<div class="line">       zoomHoverValue: 1</div>
<div class="line">       Behavior on scale { NumberAnimation { duration: 500; easing.type: Easing.OutQuad } }</div>
<div class="line">       Column {</div>
<div class="line">            Button { text: <span class="stringliteral">&quot;Hello Qt&quot;</span> }</div>
<div class="line">            Switch { }</div>
<div class="line">            RadioButton { }</div>
<div class="line">       }</div>
<div class="line">    }</div>
</div><!-- fragment --><p> <br/>
 </p>
<div class="image">
<img src="images/StarMenu_shapes.jpg" alt="StarMenu_shapes.jpg"/>
</div>
<p> <br/>
 StarItems can also be arranged in a spiral shape, grid shape or line shape. StarMenu shape property could have the following values: </p>
<ul>
<li>StarMenu.ShapeCircle (default value) </li>
<li>StarMenu.ShapeGrid </li>
<li>StarMenu.ShapeSpiral </li>
<li>StarMenu.ShapeLine</li>
</ul>
<p>Rows in grid shape are arranged centered by the mouse click and are spaced by <code>spacingH</code> and <code>spacingV</code> properties with columns count defined by <code>columns</code> property. Spiral shape takes care of <code>startingRadius</code> value to start drawing StarItems and <code>radiusIncrement</code> property to shape the spiral. Line shape has a <code>startingAngle</code>, <code>radiusIncrement</code> and <code>startingRadius</code> properties.</p>
<p>StarMenu has the center where user clicks. This center could be defined everywhere in scene coordinates by setting <code>center</code> property.</p>
<p><a href="http://www.youtube.com/watch?v=Z54zgOod0P0">http://www.youtube.com/watch?v=Z54zgOod0P0</a></p>
<p><br/>
<br/>
<br/>
<br/>
 </p>
<h1><a class="anchor" id="component_starmenu"></a>
StarMenu component</h1>
<h1><a class="anchor" id="prop_starmenu_sec"></a>
Properties</h1>
<ul>
<li><a class="el" href="index.html#prop_center">center: point</a> </li>
<li><a class="el" href="index.html#prop_color">color: color</a> </li>
<li><a class="el" href="index.html#prop_columns">columns: int</a> </li>
<li><a class="el" href="index.html#prop_delayChangePos">delayChangePos: int</a> </li>
<li><a class="el" href="index.html#prop_open">open: bool</a> </li>
<li><a class="el" href="index.html#prop_radiusH">radiusH: qreal</a> </li>
<li><a class="el" href="index.html#prop_radiusV">radiusV: qreal</a> </li>
<li><a class="el" href="index.html#prop_rotation">rotation: qreal</a> </li>
<li><a class="el" href="index.html#prop_radiusIncrement">radiusIncrement: qreal</a> </li>
<li><a class="el" href="index.html#prop_shape">shape: enumeration</a> </li>
<li><a class="el" href="index.html#prop_spacingH">spacingH: qreal</a> </li>
<li><a class="el" href="index.html#prop_spacingV">spacingV: qreal</a> </li>
<li><a class="el" href="index.html#prop_startingAngle">startingAngle: qreal</a> </li>
<li><a class="el" href="index.html#prop_endAngle">endAngle: qreal</a> </li>
<li><a class="el" href="index.html#prop_starCenterVisible">starCenterVisible: bool</a> </li>
<li><a class="el" href="index.html#prop_startingRadius">startingRadius: qreal</a> </li>
<li><a class="el" href="index.html#prop_useParentMenuCenter">useParentMenuCenter: bool</a> </li>
<li><a class="el" href="index.html#prop_visualParent">visualParent: Item</a></li>
</ul>
<h1><a class="anchor" id="signal_sec"></a>
Signals</h1>
<ul>
<li><a class="el" href="index.html#signal_starMenuOpening">StarMenu::starMenuOpening()</a> </li>
<li><a class="el" href="index.html#signal_starMenuClosing">StarMenu::starMenuClosing()</a></li>
</ul>
<p><br/>
 <br/>
 </p>
<h1><a class="anchor" id="prop_starmenu_docs"></a>
Properties Documentation</h1>
<h2><a class="anchor" id="prop_center"></a>
center: point</h2>
<p>Center coordinates relative to the root scene.</p>
<h2><a class="anchor" id="prop_closeDelay"></a>
closeDelay: int</h2>
<p>Set the delay to close the menu.</p>
<h2><a class="anchor" id="prop_color"></a>
color: color</h2>
<p>Color of the sensible area to be clicked to close the menu. Useful if <code>visualParent</code> is defined.</p>
<h2><a class="anchor" id="prop_columns"></a>
columns: int</h2>
<p>Columns when <code>ShapeGrid</code> is used.</p>
<h2><a class="anchor" id="prop_delayChangePos"></a>
delayChangePos: int</h2>
<p>Delay between each StarItems positioning after the mouse click. If <code>delayChangePos</code> property of StarItem has priority over this.</p>
<h2><a class="anchor" id="prop_endAngle"></a>
endAngle: qreal</h2>
<p>Used with ShapeCircle to define the angle of the last item+1 (this mean that in the circle shape, the last and the first item, does not overlap). Default value is 360.</p>
<h2><a class="anchor" id="prop_open"></a>
open: bool</h2>
<p>Set or get open state of StarMenu. The value is true only when the StarMenu is the current. Every parents and childs StarMenu have this property set to false. Usually the StarMenu is opened by user action.</p>
<h2><a class="anchor" id="prop_openDelay"></a>
openDelay: int</h2>
<p>Set the delay to open the menu.</p>
<h2><a class="anchor" id="prop_parentVisible"></a>
parentVisible: bool</h2>
<p>Setting this to true, the parent menu will still be visible. Useful when building a dropdown like menu. Default is false.</p>
<h2><a class="anchor" id="prop_radiusH"></a>
radiusH: qreal</h2>
<p>Horizontal radius of the circle shape.</p>
<h2><a class="anchor" id="prop_radiusV"></a>
radiusV: qreal</h2>
<p>Vertical radius of the circle shape.</p>
<h2><a class="anchor" id="prop_rotation"></a>
rotation: qreal</h2>
<p>Rotation of StarItems. Only available with circle and spiral shapes.</p>
<h2><a class="anchor" id="prop_radiusIncrement"></a>
radiusIncrement: qreal</h2>
<p>Used with spiral and line shapes to define spacing betweeen StarItems.</p>
<h2><a class="anchor" id="prop_shape"></a>
shape: enumeration</h2>
<p>Shape to be used. The default is ShapeCircle. </p>
<ul>
<li>StarMenu.ShapeCircle </li>
<li>StarMenu.ShapeGrid </li>
<li>StarMenu.ShapeSpiral </li>
<li>StarMenu.ShapeLine</li>
</ul>
<h2><a class="anchor" id="prop_spacingH"></a>
spacingH: qreal</h2>
<p>Used with ShapeGrid to space horizontally StarItems.</p>
<h2><a class="anchor" id="prop_spacingV"></a>
spacingV: qreal</h2>
<p>Used with ShapeGrid to space vertically StarItems.</p>
<h2><a class="anchor" id="prop_startingAngle"></a>
startingAngle: qreal</h2>
<p>Used with ShapeLine to define the direction of the StarItems and with ShapeCircle to define the angle of the first item. Default value is 0.</p>
<h2><a class="anchor" id="prop_starCenterVisible"></a>
starCenterVisible: bool</h2>
<p>Show the star at the center of StarMenu. The star shape has as many spikes as the number of StarItems.</p>
<h2><a class="anchor" id="prop_startingRadius"></a>
startingRadius: qreal</h2>
<p>Used with ShapeSpiral and with ShapeLine to define the distance from center of the first StarItem.</p>
<h2><a class="anchor" id="prop_useParentMenuCenter"></a>
useParentMenuCenter: bool</h2>
<p>When true, the center of the StarMenu will be the center of parent StarMenu if exists.</p>
<h2><a class="anchor" id="prop_visualParent"></a>
visualParent: Item</h2>
<p>The Item in which the user will click to close the StarMenu. The default sensible area is the parent of StarMenu, with the <code>visualParent</code>, developers are able to redefine this area for example to the main application window.</p>
<p><br/>
 <br/>
 </p>
<h1><a class="anchor" id="signal_starmenu_docs"></a>
Signals documentation</h1>
<h2><a class="anchor" id="signal_starMenuOpening"></a>
StarMenu::starMenuOpening()</h2>
<p>Signal for detecting StarMenu opening.</p>
<h2><a class="anchor" id="signal_starMenuClosing"></a>
StarMenu::starMenuClosing()</h2>
<p>Signal for detecting StarMenu closing.</p>
<p><br/>
 <br/>
 <br/>
 <br/>
 </p>
<h1><a class="anchor" id="component_staritem"></a>
StarItem component</h1>
<h1><a class="anchor" id="prop_staritem_sec"></a>
Properties</h1>
<ul>
<li><a class="el" href="index.html#prop_staritem_zoomHoverValue">zoomHoverValue: qreal</a> </li>
<li><a class="el" href="index.html#prop_staritem_delayChangePos">delayChangePos: int</a></li>
</ul>
<h1><a class="anchor" id="signal_staritem_sec"></a>
Signals</h1>
<ul>
<li><a class="el" href="index.html#signal_staritem_hoverItem">StarItem::hoverItem()</a> </li>
<li><a class="el" href="index.html#signal_staritem_leaveItem">StarItem::leaveItem()</a> </li>
<li><a class="el" href="index.html#signal_staritem_clicked">StarItem::clicked()</a></li>
</ul>
<p><br/>
 <br/>
 </p>
<h1><a class="anchor" id="prop_staritem_docs"></a>
Properties Documentation</h1>
<h2><a class="anchor" id="prop_staritem_zoomHoverValue"></a>
zoomHoverValue: qreal</h2>
<p>Zoom value when mouse enters.</p>
<h2><a class="anchor" id="prop_staritem_delayChangePos"></a>
delayChangePos: int</h2>
<p>Delay between StarItem is positioned after the mouse click. If this property is set, it will take priority over the same StaMenu property.</p>
<h1><a class="anchor" id="signal_staritem_docs"></a>
Signals Documentation</h1>
<h2><a class="anchor" id="signal_staritem_hoverItem"></a>
StarItem::hoverItem()</h2>
<p>Signal for detecting when mouse is hover.</p>
<h2><a class="anchor" id="signal_staritem_leaveItem"></a>
StarItem::leaveItem()</h2>
<p>Signal for detecting when mouse leaves.</p>
<h2><a class="anchor" id="signal_staritem_clicked"></a>
StarItem::clicked()</h2>
<p>Signal for detecting a mouse click. </p>
</div></div><!-- contents -->
<!-- start footer part -->
<hr class="footer"/><address class="footer"><small>
Generated on Sun Jun 3 2012 19:24:01 for StarMenu by &#160;<a href="http://www.doxygen.org/index.html">
<img class="footer" src="doxygen.png" alt="doxygen"/>
</a> 1.8.1
</small></address>
</body>
</html>
